<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>

    </style>
</head>
<body class="bg-f5">
    <div class="filterBox show">
        <div class="popOverlay" tapmode onClick="togFilter();"></div>
        <div class="topFix productFilter">
            <ul class="filterList">
                <li class="aui-border-b active" tapmode onclick="changeSort(0);">综合排序</li>
                <li class="aui-border-b" tapmode onclick="changeSort(1);">优惠券由高到低</li>
                <li class="aui-border-b" tapmode onclick="changeSort(2);">佣金由高到低</li>
            </ul>
            <dl class="priceFilter aui-flex-col aui-flex-middle">
                <dt>券后价区间</dt>
                <dd class="flex-auto aui-flex-col aui-flex-middle priceInputBox">
                    <div><input type="tel" name="minPrice" value="" placeholder="最低价" class="priceInput minPrice"></div>
                    <div class="arrow">—</div>
                    <div><input type="tel" name="maxPrice" value="" placeholder="最高价" class="priceInput maxPrice"></div>
                </dd>
            </dl>
            <div class="aui-flex-col aui-flex-center">
                <div class="filterBtn bg-red" tapmode onclick="saveFilter();">确定</div>
            </div>
        </div>
    </div>
    <div class="notData aui-hide aui-flex-row aui-flex-middle">
        <div class="ico"><img src="../../image/notdata/01.png" alt=""></div>
    </div>
    <div class="comFlowBox">
        <div class="comGodList" id="flow_html">
            <div class="grid-sizer"></div>
        </div>
    </div>

    <script type="text/x-dot-template" id="flow_tpl">
        {{ for(var i in it){ }}
        {{ if(it[i].title){ }}
		<div class="item" data-id="{{= it[i].shop_id}}" tapmode onClick="openProductDetail({{= it[i].shop_id}});">
            <div class="inner">
                {{ if(it[i].data_amount && getUserVip()>1 ){ }}
                <div class="earn">赚￥{{= it[i].data_amount}}</div>
                {{ } }}
                <div class="photo"><img src="{{= it[i].pict_url}}" alt=""></div>
                <div class="textBox">
                    <div class="title aui-flex-col aui-flex-middle">
                        <div class="aui-ellipsis-2"><span class="tag">{{= it[i].user_type }}</span>{{= it[i].title }}</div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle priceBox">
                        <div class="nowPrice">¥{{= it[i].coupon_amount }}</div>
                        <div class="delPrice">¥<del>{{= it[i].zk_final_price }}</del></div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle aui-flex-between">
                        {{ if( it[i].coupon_info ){ }}
                        <dl class="quan outline aui-flex-col aui-flex-middle">
                            <dt>券</dt>
                            <dd>{{= it[i].coupon_info }}元</dd>
                        </dl>
                        {{ }else{ }}
                        <div></div>
                        {{ } }}
                        <div class="sale">月销 {{= it[i].volume }}件</div>
                    </div>
                </div>
            </div>
		</div>
        {{ } }}
        {{ } }}
    </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-range.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    var PARAM_INFO;
    var CAT_ID,SUB_CAT_ID;
    var gridDom = '#flow_html';
    var grid;
    var isLoading = false;
    var loadFlag = true;
    var pageSize = 50;
    var currentPage = 1;
    var postData = {};
    var filterType = 0;
    var priceFilterFlag = false;
    var price_min;
    var price_max;
    apiready = function() {
        api.parseTapmode();
        PARAM_INFO = api.pageParam;
        CAT_ID = PARAM_INFO.catId;
        SUB_CAT_ID = PARAM_INFO.subCatId;

        setPostData();

        //监听到达底部
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0
            }
        }, function(ret, err) {
            if(isLoading)return;
            if(loadFlag){
               getData();
            }
        });
    };
    //切换子分类
    function changeSubCat(n){
        SUB_CAT_ID = n;
        postData.shop_class_two = SUB_CAT_ID;
        resetFilter();
        setPostData();
    }
    function resetFilter(){
        changeSort(0);
        priceFilterFlag = false;
        $$('.priceFilter .minPrice').val('');
        $$('.priceFilter .maxPrice').val('');
    }
    //切换排序
    function changeSort(ind){
        filterType = ind;
        $$('.filterList li').removeClass('active').eq(ind).addClass('active');
    }
    function saveFilter(){
        var min = parseInt($$('.priceFilter .minPrice').val());
        var max = parseInt($$('.priceFilter .maxPrice').val());
        priceFilterFlag = false;
        if( min && max && min>=0 && max>=min ){
            price_min = min;
            price_max = max;
            priceFilterFlag = true;
        }else{
            $$('.priceFilter .minPrice').val('');
            $$('.priceFilter .maxPrice').val('');
        }
        setPostData();
    }

    //设置postData
    function setPostData(){
        hideFilter();
        loadFlag = true;
        currentPage = 1;
        postData = {
            shop_class_one: CAT_ID,
            shop_class_two: SUB_CAT_ID,
            pageSize: pageSize
        }
        if(filterType == 1){
            //优惠券
            postData.coupon = true;
        }
        if(filterType == 2){
            //佣金
            postData.data_amount = -1;
        }
        if(priceFilterFlag){
            //价格区间
            postData.price_min = price_min;
            postData.price_max = price_max;
        }
        if(getUserId()){
            postData.userid = getUserId();
        }
        getData();
    }

    //调用瀑布流
    grid = new Masonry(gridDom, {
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        percentPosition: true
    });
    imagesLoaded(gridDom, function() {
        grid.layout();
    });
    //瀑布流
    function getFlow(flowData) {
        var tpl = $$('#flow_tpl').html();
        var tempFn = doT.template(tpl);
        var elem = $$(tempFn(flowData));
        if( currentPage==1 ){
            $$('#flow_html').html('<div class="grid-sizer"></div>');
        }
        $$(gridDom).append(elem);
        grid.appended(elem);
        imagesLoaded(gridDom, function() {
            grid.layout();
        });

        api.parseTapmode();
    }

//展开筛选
function togFilter(){
	$$('.filterBox').toggleClass('show');
    if( $$('.filterBox').hasClass('show') ){
        api.setWinAttr({
            slidBackEnabled: false
        });
    }else{
        api.setWinAttr({
            slidBackEnabled: true
        });
    }
}
function hideFilter(){
	$$('.filterBox').removeClass('show');
    api.setWinAttr({
        slidBackEnabled: true
    });
}

//获取数据
function getData(){
    showProgress();
    isLoading = true;
    postData.pageNo = currentPage;
    console.log(JSON.stringify(postData));
    api.ajax({
        url: BASE_URL + 'App/Select/shopList',
        method: 'post',
        data: {
            values: postData
        }
    },function(ret,err){
        if (ret) {
          // console.log(JSON.stringify(ret))
            if(ret.code == 1 && ret.data.length > 0){
                $$('.notData,.noMoreData').addClass('aui-hide');
                getFlow(ret.data);
                currentPage++;
                api.parseTapmode();
                //如果加载出来的数量 小于 pagesize 说明到底线了
                if(ret.data.length < postData.pageSize){
                    $$('.noMoreData').removeClass('aui-hide');
                    loadFlag = false;
                }
			}else{
				if(currentPage == 1){
                    $$('#flow_html').html('');
                    $$('.noMoreData').addClass('aui-hide');
                    $$('.notData').removeClass('aui-hide');
                }else{
                    $$('.noMoreData').removeClass('aui-hide');
                }
                loadFlag = false;
			}
        }
        isLoading = false;
        hideProgress();
    });
}
</script>

</html>
